<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f0f0f0;
        }

        .test-section {
            background: white;
            padding: 20px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .error {
            color: red;
            background: #ffe6e6;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }

        .success {
            color: green;
            background: #e6ffe6;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            background: #007bff;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background: #0056b3;
        }

        canvas {
            border: 2px solid #333;
            background: #000;
        }
    </style>
</head>

<body>
    <h1>🎮 游戏诊断测试</h1>

    <div class="test-section">
        <h2>1. 基础功能测试</h2>
        <button onclick="testBasicFunctions()">测试基础功能</button>
        <div id="basic-test-result"></div>
    </div>

    <div class="test-section">
        <h2>2. Canvas测试</h2>
        <canvas id="testCanvas" width="400" height="300"></canvas>
        <button onclick="testCanvas()">测试Canvas渲染</button>
        <div id="canvas-test-result"></div>
    </div>

    <div class="test-section">
        <h2>3. 模块加载测试</h2>
        <button onclick="testModuleLoading()">测试模块加载</button>
        <div id="module-test-result"></div>
    </div>

    <div class="test-section">
        <h2>4. 音频API测试</h2>
        <button onclick="testAudioAPI()">测试音频API</button>
        <div id="audio-test-result"></div>
    </div>

    <div class="test-section">
        <h2>5. 游戏初始化测试</h2>
        <button onclick="testGameInit()">测试游戏初始化</button>
        <div id="game-test-result"></div>
    </div>

    <script>
        function logResult(elementId, message, isSuccess = true) {
            const element = document.getElementById(elementId);
            element.innerHTML = `<div class="${isSuccess ? 'success' : 'error'}">${message}</div>`;
        }

        function testBasicFunctions() {
            try {
                // 测试基础JavaScript功能
                const testArray = [1, 2, 3];
                const testObject = { key: 'value' };
                const testFunction = () => 'test';

                if (testArray.length === 3 && testObject.key === 'value' && testFunction() === 'test') {
                    logResult('basic-test-result', '✅ 基础JavaScript功能正常');
                } else {
                    throw new Error('基础功能测试失败');
                }
            } catch (error) {
                logResult('basic-test-result', `❌ 基础功能测试失败: ${error.message}`, false);
            }
        }

        function testCanvas() {
            try {
                const canvas = document.getElementById('testCanvas');
                const ctx = canvas.getContext('2d');

                // 测试Canvas绘制
                ctx.fillStyle = '#ff0000';
                ctx.fillRect(50, 50, 100, 100);

                ctx.fillStyle = '#00ff00';
                ctx.beginPath();
                ctx.arc(200, 150, 50, 0, Math.PI * 2);
                ctx.fill();

                logResult('canvas-test-result', '✅ Canvas渲染功能正常');
            } catch (error) {
                logResult('canvas-test-result', `❌ Canvas测试失败: ${error.message}`, false);
            }
        }

        async function testModuleLoading() {
            try {
                // 测试ES6模块导入
                const { PongGame } = await import('./src/js/pong-game.js');
                logResult('module-test-result', '✅ ES6模块加载正常');
            } catch (error) {
                logResult('module-test-result', `❌ 模块加载失败: ${error.message}`, false);
            }
        }

        function testAudioAPI() {
            try {
                // 测试Web Audio API
                const AudioContext = window.AudioContext || window.webkitAudioContext;
                if (AudioContext) {
                    const audioContext = new AudioContext();
                    logResult('audio-test-result', '✅ Web Audio API支持正常');
                } else {
                    throw new Error('Web Audio API不支持');
                }
            } catch (error) {
                logResult('audio-test-result', `❌ 音频API测试失败: ${error.message}`, false);
            }
        }

        async function testGameInit() {
            try {
                // 测试游戏初始化
                const { PongGame } = await import('./src/js/pong-game.js');
                const canvas = document.getElementById('testCanvas');
                const ctx = canvas.getContext('2d');

                const game = new PongGame(canvas, ctx);
                game.render(ctx);

                logResult('game-test-result', '✅ 游戏初始化成功');
            } catch (error) {
                logResult('game-test-result', `❌ 游戏初始化失败: ${error.message}`, false);
            }
        }

        // 页面加载时自动运行基础测试
        window.addEventListener('load', () => {
            testBasicFunctions();
            testCanvas();
        });
    </script>
</body>

</html>